<template>
  <div class="app-container">
    <div class="btn" style="margin-bottom: 20px;" >
        <el-form ref="form" :model="form" label-width="80px" inline>
            <el-form-item label="账期">
                <el-date-picker
                    value-format="yyyyMM"
                    v-model="form.acctMonth"
                    style="width: 140px"
                    type="month"
                    placeholder="请选择账期"
                    :picker-options="endDateDisabled"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="区域">
                <el-cascader clearable
                v-model="form.areaId"
                :options="options"
                :props="props"
                :show-all-levels="false"
                @visible-change="getAreaData"
                ></el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery" style="margin-left:10px;">搜索</el-button>
                <el-button type="primary" plain @click="getPdf()">导出PDF</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div id="pdfDom">
        <overallTrend :searchData="searchData"></overallTrend>
        <businessUnit :searchData="searchData" ></businessUnit>
        <Source :searchData="searchData"></Source>
        <pointsoperateCounty v-if="form.areaId == 2" :searchData="searchData"></pointsoperateCounty>
        <pointsoperateBranch v-if="form.areaId == 2" :searchData="searchData"></pointsoperateBranch>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getMonths,roleDeptTreeselecttw
} from "@/api/workspace/income";
import overallTrend from "./components/overallTrend"; // 台阶收入 - 整体趋势
import businessUnit from './components/businessUnit'; // 台阶收入 – 经营单元增长情况
import Source from './components/source'; // 台阶收入 - 分来源和细项
import pointsoperateCounty from './components/pointsoperateCounty'; // 台阶收入 – 分经营单元（县分）
import pointsoperateBranch from './components/pointsoperateBranch'; // 台阶收入 – 分经营单元（分局）
export default {
  name: "analysis",
  components: {
      overallTrend,
      businessUnit,
      pointsoperateCounty,
      pointsoperateBranch,
      Source
  },
  data() {
    return {
        htmlTitle: '台阶收入分析',
        form: {
            acctMonth: '',
            areaId: ''
        },
        searchData:{
            acctMonth: '',
            areaId: ''
        },
        endDateDisabled: this.pickerDisabled(),
        disabledTime: "",
        options: [],
        props: {
            value: 'deptId',
            label: 'displayName',
            emitPath: false,
            checkStrictly: true,
            lazy: true,
            lazyLoad(node, resolve) {
                if (node.value) {
                    roleDeptTreeselecttw({
                        areaId: node.value
                    }).then(res => {
                        if (res.code == 200) {
                            if (node.level == 3) {
                                res.depts.forEach(item => {
                                    item.leaf = true;
                                });
                            }
                            resolve(res.depts);
                        }
                    });
                }
            }
        }
    };
  },
  computed: {
    ...mapGetters([
    'deptId',
    'deptName'
    ]),
  },
  created() {

  },
  mounted() {
    var obj = {deptId:Number(this.deptId),displayName: this.deptName}
    let arr = []
    arr.push(obj)
    this.options = arr
    this.form.areaId = Number(this.deptId)
    this.getMaxMonths()
  },
  methods: {
    getAreaData(val) {
        if (val == true) {
            let obj = {deptId:this.deptId,displayName: this.deptName}
            let arr = []
            arr.push(obj)
            this.options = arr
        }
    },
    pickerDisabled() {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear(),
              a = t.getMonth() + 1;
            if (
              (a >= 1 && a <= 9 && (a = "0" + a),
              n.toString() + a.toString() > e.disabledTime)
            ) {
              return !0;
            }
          }
        },
      };
    },
    getMaxMonths() {
      return new Promise((resolve) => {
        getMonths().then((res) => {
          resolve(res.msg);
          this.form.acctMonth = res.msg;
          this.disabledTime = res.msg;
        });
      });
    },
    handleQuery() {
        this.searchData.areaId = this.form.areaId
        this.searchData.acctMonth = this.form.acctMonth
    },
  }
};
</script>
